import { createElement, ImgHTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import ImageGroup from './ImageGroup';
import { imageDefaultProps } from './defaultProps';
import type { ImageOptions } from './type';

export interface ImageProps extends ImageOptions, ImgHTMLAttributes<HTMLImageElement> {}

interface ImageInterface extends FC<ImageProps> {
  Group: typeof ImageGroup;
}

const Image: ImageInterface = (props) => {
  const {
    className,
    size,
    hidden,
    disabled,
    avatar,
    bordered,
    fluid,
    rounded,
    circular,
    aligned,
    centered,
    spaced,
    floated,
    ui,
    wrapped,
    forwardedRef,
    ...imageProps
  } = props;

  const classNameStr = classNames(
    { hidden, disabled },
    ui && 'ui',
    size,
    { avatar, bordered, fluid, rounded, circular, centered },
    aligned,
    { aligned },
    spaced,
    { spaced },
    floated,
    { floated },
    'image',
    className,
  );

  if (wrapped) {
    return createElement(
      'div',
      {
        ref: forwardedRef,
        className: classNameStr,
      },
      createElement('img', imageProps),
    );
  } else {
    return createElement('img', {
      ref: forwardedRef,
      className: classNameStr,
      ...imageProps,
    });
  }
};

Image.displayName = 'Image';
Image.defaultProps = imageDefaultProps;

Image.Group = ImageGroup;

export default Image;
